<template>
  <div class="overview">
    <!-- <div class="top">
        <div class="button-group">
          <button @click="changeLongitude(-5)">
            <BackwardOutlined style="font-size: 25px;" />
          </button>
          <button @click="changeLongitude(-1)">
            <CaretLeftOutlined style="font-size: 25px;" />
          </button>
          <a-select>
            <a-select-option :value="item.value" v-for="item in typeOptions" :key="item.label">{{
              item.value
              }}</a-select-option>
          </a-select>
        </div>
        <div class="longitude-display" id="longitude-display">{{ longitude }}</div>
        <div class="button-group">
          <button @click="changeLongitude(1)">
            <CaretRightOutlined style="font-size: 25px;" />
          </button>
          <button @click="changeLongitude(5)">
            <ForwardOutlined style="font-size: 25px;" />
          </button>
        </div>
      </div> -->
    <div class="bottom" v-if="flag">
      <a-table :columns="columns" :data-source="data" :pagination="false" :customRow="customRow">
        <!-- <template #_status="{ text, record }">
          <a style="color: #fff" @click="handleClick(record)">{{ text }}</a>
        </template> -->
        <template #title>List of Satellites at Geostationary orbit</template>
        <template #action="{ text, record, index}">
            {{ index+1 }}
          </template>
      </a-table>
    </div>
    <div class="box" v-else>
      <button style="position: absolute;top: 40px;left:50px;width: 40px;height: 40px;" @click="changeLongitude()">
        <CaretLeftOutlined style="font-size: 25px;" />
      </button>
      <div class="left">
        <p>Satellite Name:{{ datas._call_sign }}</p>
        <p>Status:{{ datas._status }}</p>
        <p>Position:{{ datas._position }}</p>
        <p>NORAD:{{ datas._norad }}</p>
        <p>Cospar number:{{ datas._cospar_number }}</p>
        <p>Operator:{{ datas._operator }}</p>
        <p>Launch date:{{ datas._launch_date }}</p>
        <p>Launch site:{{ datas._launch_site }}</p>
        <p>Launch vehicle:{{datas.launch_vehicle }}</p>
        <p>Launch mass (kg):{{ datas['_launch_mass_(kg)'] }}</p>
        <p>Dry mass (kg):{{ datas['_dry_mass_(kg)'] }}</p>
        <p>Manufacturer:{{datas._manufacturer}}</p>
        <p>Model (bus):{{ datas['_model_(bus)'] }}</p>
        <p>Orbit:{{ datas._orbit }}</p>
        <p>Expected lifetime:{{ datas._expected_lifetime }}</p>
      </div>
      <div class="right">
        <p>Call sign:{{ datas._call_sign }}</p>
        <p>Beacon(s):{{ datas['_beacon(s)'] }}</p>
        <p>Details:{{ datas._details }}</p>
        <p>Charts:</p>
      </div>
      <div class="bottoms">
        <a-carousel arrows>
          <template #prevArrow>
            <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
              <left-circle-outlined />
            </div>
          </template>
          <template #nextArrow>
            <div class="custom-slick-arrow" style="right: 10px">
              <right-circle-outlined />
            </div>
          </template>
          <div v-for="item,index in imgs" :key="index">
                      <img style="width: 100%; height: 100%;" :src="baseImgUrl + item" alt="">
                  </div>
        </a-carousel>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { CaretLeftOutlined, BackwardOutlined, CaretRightOutlined, ForwardOutlined, LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
export default defineComponent({
  name: 'overview',
  components: {
    CaretLeftOutlined, BackwardOutlined, CaretRightOutlined, ForwardOutlined, LeftCircleOutlined,
    RightCircleOutlined,
  },

  setup() {
    const baseImgUrl = 'http://123.125.194.157:18080/api'
    const router = useRouter();
    const typeOptions = ref([
      {
        value: 'w',
        label: 'M710a',
      },
      {
        value: 'e',
        label: 'M650',
      },
    ]);
    let longitude = ref(0)
    function changeLongitude() {
      flag.value = true
    }
    function customRow(record, index) {
      return {
        onClick: () => handleClick(record, index)
      };
    }
    let datas = ref({})
    let flag = ref(true)
    let imgs = ref([])
    imgs.value = ['/sat/pic/3E-Ka-Spot1.jpg', '/sat/pic/3E-Ka-Spot2.jpg']
    const handleClick: Function = (record) => {
      datas.value = record
      imgs.value = record.pics
      flag.value = false
      // router.push({ path: '/satellite/detail', query: record  });
    }

    const columns = [
      {
        title: '',
        dataIndex: 'id',
        defaultSortOrder: 'descend',
        slots: { customRender: 'action' },
      },
      {
        title: 'Potition',
        dataIndex: '_position',
        filters: [
          {
            text: 'Joe',
            value: 'Joe',
          },
          {
            text: 'Jim',
            value: 'Jim',
          },
          {
            text: 'Submenu',
            value: 'Submenu',
            children: [
              {
                text: 'Green',
                value: 'Green',
              },
              {
                text: 'Black',
                value: 'Black',
              },
            ],
          },
        ],
        // specify the condition of filtering result
        // here is that finding the name started with `value`
        onFilter: (value: string, record: TableDataType) => record.name.indexOf(value) === 0,
        sorter: (a: TableDataType, b: TableDataType) => a.name.length - b.name.length,
        sortDirections: ['descend'],
      },
      {
        title: 'Status',
        dataIndex: '_status',
        defaultSortOrder: 'descend',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        slots: { customRender: '_status' },
        onFilter: (value: string, record: TableDataType) => record.satelliteName.indexOf(value) === 0,
      },
      {
        title: 'Satellite Name',
        dataIndex: '_call_sign',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        onFilter: (value: string, record: TableDataType) => record.satelliteName.indexOf(value) === 0,
        sortDirections: ['descend', 'ascend'],
      },
      {
        title: 'Norad',
        dataIndex: '_norad',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        onFilter: (value: string, record: TableDataType) => record.norad.indexOf(value) === 0,
        sortDirections: ['descend', 'ascend'],
      },
      {
        title: 'Cospar',
        dataIndex: '_cospar_number',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        onFilter: (value: string, record: TableDataType) => record.cospar.indexOf(value) === 0,
        sortDirections: ['descend', 'ascend'],
      },
      {
        title: 'Satellite Model',
        dataIndex: '_model_(bus)',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        onFilter: (value: string, record: TableDataType) => record.satelliteModel.indexOf(value) === 0,
        sortDirections: ['descend', 'ascend'],
      },
      {
        title: 'Operator',
        dataIndex: '_operator',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        onFilter: (value: string, record: TableDataType) => record.operator.indexOf(value) === 0,
        sortDirections: ['descend', 'ascend'],
      },
      {
        title: 'Launch site',
        dataIndex: '_launch_site',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        onFilter: (value: string, record: TableDataType) => record.launchsite.indexOf(value) === 0,
        sortDirections: ['descend', 'ascend'],
      },
      {
        title: 'Launch mass',
        dataIndex: '_launch_mass_(kg)',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        onFilter: (value: string, record: TableDataType) => record.launchmass.indexOf(value) === 0,
        sortDirections: ['descend', 'ascend'],
      },
      {
        title: 'Launch date',
        dataIndex: '_launch_date',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        onFilter: (value: string, record: TableDataType) => record.launchdate.indexOf(value) === 0,
        sortDirections: ['descend', 'ascend'],
      },
      {
        title: 'Comments',
        dataIndex: '_details',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        onFilter: (value: string, record: TableDataType) => record.comments.indexOf(value) === 0,
        sortDirections: ['descend', 'ascend'],
      },
    ];
    // 

    let data = ref([
      // {
      //   _position: '1',
      //   _status: 'John Brown',
      //   age: 32,
      //   address: 'New York No. 1 Lake Park',
      // },
      // {
      //   _position: '2',
      //   name: 'Jim Green',
      //   age: 42,
      //   address: 'London No. 1 Lake Park',
      // },
      // {
      //   _position: '3',
      //   name: 'Joe Black',
      //   age: 32,
      //   address: 'Sidney No. 1 Lake Park',
      // },
      // {
      //   _position: '4',
      //   name: 'Jim Red',
      //   age: 32,
      //   address: 'London No. 2 Lake Park',
      // },
    ]);

    axios.get('/api/sat').then((res) => {
      data.value = res.data.data.result.data || []
      data.value.forEach((item,index)=>{})
    })
    return {
      changeLongitude, longitude, typeOptions, columns, data, handleClick, datas, flag,imgs,customRow,
      baseImgUrl
    }
  },
})
</script>
<style scoped lang=less>
.overview {
  width: 100%;
  height: 100%;
  padding-top: 80px;
  box-sizing: border-box;

  .top {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;

    ::v-deep .ant-select-selector {
      color: #fff !important;
    }

    .longitude-display {
      margin: 0 20px;
      font-size: 24px;
      color: #fff;
    }

    .button-group {
      display: flex;
      align-items: center;
    }

    button {
      margin: 5px;
      padding: 10px;
      font-size: 16px;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      color: white;
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #ccc;
    }
  }

  .bottom {
    width: 100%;
    height: calc(100% - 100px);
    // background: pink;
    margin-top: 10px;

    //表格头部样式
    ::v-deep .ant-table-title {
      text-align: center !important;
      height: 30px;
      padding: 0;
      line-height: 30px;
      font-size: 15px;
    }

    ::v-deep .ant-table-thead>tr>th {
      padding: 5px 0;
      border: 0.5px solid #ccc !important;
      box-sizing: border-box;
    }

    ::v-deep .ant-table-tbody>tr>td {
      border: 0.5px solid #ccc;
      box-sizing: border-box;
    }

    ::v-deep .ant-table-thead>tr>th .anticon-filter {
      // right: null;
      // position: relative;
      // height: 18px;
      // text-align: center;
    }

    ::v-deep .ant-table-thead>tr>th.ant-table-column-has-actions.ant-table-column-has-filters {
      // padding-right: 0 !important;
    }
  }

  ::v-deep {

    .ant-table-thead>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
    .ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
    .ant-table-thead>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
    .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td {
      color: #000;
      a {
        color: blue !important;
      }
    }
  }
}

.box {
  width: 100%;
  height: 100%;
  color: #fff;

  .left {
    width: 50%;
    float: left;
    padding: 20px;
    box-sizing: border-box;
  }

  .right {
    width: 50%;
    float: left;
    padding: 20px;
    box-sizing: border-box;
  }

  .bottoms {
    width: 100%;
    float: left;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  }

}

.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 550px;
  line-height: 550px;
  background: #364d79;
  overflow: hidden;
}

::v-deep .ant-carousel {
  width: 50%;
}

.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}

.ant-carousel :deep(.custom-slick-arrow:before) {
  display: none;
}

.ant-carousel :deep(.custom-slick-arrow:hover) {
  opacity: 0.5;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
}

::v-deep .slick-dots-bottom {
  display: none !important;
}
button:hover {
      background-color: #ccc;
    }
</style>